<template>
    <div class="home-container">
        <el-table :data="reData" style="width: 100%" border>
            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="标题" width="180" align="center">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center">
                <template slot-scope="scope">
                    {{ scope.row.description }}
                </template>
            </el-table-column>
            <el-table-column label="中图预览" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 100px" :src="scope.row.midImg" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="大图预览" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 100px" :src="scope.row.bigImg" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-tooltip content="编辑" placement="top">
                        <el-button
                            @click="handleEditBanner(scope.row)"
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            size="mini"
                        ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑弹出框 -->
        <el-dialog title="请编辑信息" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form :model="form">
                <el-form-item label="标题">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="首页中图">
                            <upload v-model="form.midImg"></upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="首页大图">
                            <upload v-model="form.bigImg"></upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditBannerConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getBanner, editBanner } from "@/api/banner"
import Upload from "@/components/Upload/index.vue"
import { url } from "@/urlConfig"
export default {
    components: { Upload },
    data() {
        return {
            data: [],
            dialogVisible: false,
            form: {
                id: "",
                midImg: "",
                bigImg: "",
                title: "",
                description: ""
            }
        }
    },
    computed: {
        reData() {
            const newData = this.data.map((item) => {
                if (!item.midImg.startsWith(url)) {
                    item.midImg = url + item.midImg
                }
                if (!item.bigImg.startsWith(url)) {
                    item.bigImg = url + item.bigImg
                }
                return item
            })
            return newData
        }
    },
    async created() {
        const data = await this.fetchData()
        this.data = data
    },
    methods: {
        async fetchData() {
            const res = await getBanner()
            const data = res.data.map((item) => {
                return item
            })
            return data
        },
        handleEditBanner(row) {
            this.form = { ...row }
            this.dialogVisible = true
        },
        // 控制dialog关闭
        async handleClose() {
            const res = await getBanner()
            this.data = res.data
        },
        // 点击确认修改
        handleEditBannerConfirm() {
            // 从表单里面拿到用户修改的数据发送给服务器
            const arr = [...this.data]
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id === this.form.id) {
                    arr[i] = this.form
                }
            }
            editBanner(arr).then((res) => {
                this.dialogVisible = false
                this.$message.success("修改成功")
                this.fetchData().then((result) => {
                    this.data = result
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.home-container {
    padding: 20px;
}
// vue2的穿透
::v-deep .el-form-item {
    margin-bottom: 0;
}
</style>
